<template>
  <div class="header w100 h60p bc3 ps">
    <Logo msg="a logo" class="float-left" />
    <UserCenter :msg="state.userInfo" />
    <MenuList class="float-right" :msg="state.userInfo" />
    <div class="clean-float"></div>
  </div>
</template>

<script setup>
import { defineProps, reactive, watch } from "vue";
import Logo from "../Logo/Logo.vue";
import MenuList from "../MenuList/MenuList.vue";
import UserCenter from "./UserCenter.vue";

// 父组件传值
const props = defineProps({
  msg: Object,
});

// 双向绑定数据
const state = reactive({
  userInfo: props.msg,
});

// 监听父组件传值变化，传递到用户信息组件
watch(
  () => props.msg,
  (newValue) => {
    state.userInfo = newValue;
  }
);
</script>

<style scoped>
.header {
  z-index: 800;
}
</style>
